<template>
	<cl-crud ref="Crud">
		<cl-row>
			<!-- 刷新按钮 -->
			<cl-refresh-btn @click="refreshFn()" />
			<!-- 新增按钮 -->
			<cl-add-btn />
			<!-- 删除按钮 -->
			<cl-multi-delete-btn />
			<cl-filter label="是否对聊">
				<cl-select prop="isChat" :options="options.chatList" />
			</cl-filter>
			<cl-flex1 />
			<!-- 关键字搜索 -->
			<cl-search-key placeholder="搜索姓名、昵称" />
		</cl-row>

		<cl-row>
			<!-- 数据表格 -->
			<cl-table ref="Table">
				<template #slot-btn="{ scope }">
					<!--<el-button text bg @click="ViewPayCode(scope.row, 1)">支付码</el-button>
					<el-button text bg @click="ViewPayCode(scope.row, 2)">主播码</el-button>
					<el-button text bg @click="ViewPayCode(scope.row, 3)">直播码</el-button>
					<el-button text bg @click="ViewPayCode(scope.row, 4)">入场码</el-button>-->
				</template>
			</cl-table>
		</cl-row>

		<cl-row>
			<cl-flex1 />
			<!-- 分页控件 -->
			<cl-pagination />
		</cl-row>

		<!-- 新增、编辑 -->
		<cl-upsert ref="Upsert" />
		<cl-dialog
			:title="options.codeType == 1 ? '支付码' : '主播查看码'"
			v-model="visible"
			width="720"
		>
			<div class="code-main" v-if="options.codeType == 1">
				<p class="code-box">
					<QrcodeVue :value="payUrl" :size="240" level="H" />
					<img :src="imgUrl" alt="" />
				</p>
				<p class="code-box">
					<QrcodeVue :value="payUrl" :size="240" level="H" />
					<img :src="imgWxUrl" alt="" />
				</p>
			</div>
			<div
				class="code-main"
				v-if="options.codeType == 2 || options.codeType == 3 || options.codeType == 4"
			>
				<p class="code-box">
					<QrcodeVue :value="payUrl" :size="240" level="H" />
					<!-- <img :src="imgUrl" alt="" /> -->
				</p>
			</div>
		</cl-dialog>
	</cl-crud>
</template>

<script lang="ts" name="demo-info" setup>
import { useCrud, useTable, useUpsert } from "@cool-vue/crud";
import { useCool } from "/@/cool";
import { ref, reactive, onMounted } from "vue";
import QrcodeVue from "qrcode.vue";
import imgUrl from "../../../plugins/image/alipay.png";
import imgWxUrl from "../../../plugins/image/wxpay.png";

const { service } = useCool();
import { useDict } from "/$/dict";
const { dict } = useDict();

const options = reactive({
	sourceList: [
		{ label: "内部", value: 0, type: "danger" },
		{ label: "外部", value: 1, type: "success" }
	],
	chatList: [
		{ label: "否", value: 0, type: "danger" },
		{ label: "是", value: 1, type: "success" }
	],
	codeType: 1,
	bookNowTimeList: [
		{ label: "17:20", value: "17:20", type: "success" },
		{ label: "17:30", value: "17:30", type: "success" },
		{ label: "17:40", value: "17:40", type: "success" },
		{ label: "17:50", value: "17:50", type: "success" },
		{ label: "18:20", value: "18:20", type: "success" },
		{ label: "18:30", value: "18:30", type: "success" },
		{ label: "18:40", value: "18:40", type: "success" },
		{ label: "18:50", value: "18:50", type: "success" },
		{ label: "19:20", value: "19:20", type: "success" },
		{ label: "19:30", value: "19:30", type: "success" },
		{ label: "19:40", value: "19:40", type: "success" },
		{ label: "19:50", value: "19:50", type: "success" }
	]
});

let companyList: any = ref([]);

// cl-upsert
const Upsert = useUpsert({
	dialog: {
		width: "40%"
	},
	items: [
		{
			label: "姓名",
			prop: "name",
			component: { name: "el-input", props: { clearable: true } },
			col: {
				span: 12
			},
			required: true
		},
		{
			label: "昵称",
			prop: "nickname",
			component: { name: "el-input", props: { clearable: true } },
			col: {
				span: 12
			},
			required: true
		},
		{
			label: "抖音",
			prop: "dyNum",
			component: { name: "el-input", props: { clearable: true } },
			col: {
				span: 12
			}
		},
		{
			label: "微信",
			prop: "wxNum",
			component: { name: "el-input", props: { clearable: true } },
			col: {
				span: 12
			}
		},
		{
			label: "入圈单价",
			prop: "goldCoinPrice",
			component: { name: "el-input-number", props: { clearable: true } },
			col: {
				span: 12
			},
			required: true
		},
		{
			label: "微信单价",
			prop: "wxPrice",
			component: { name: "el-input-number", props: { clearable: true } },
			col: {
				span: 12
			},
			required: true
		},
		{
			label: "所属公司",
			prop: "companyId",
			component: {
				name: "el-select",
				options: companyList
			},
			col: {
				span: 12
			},
			required: true,
			value: ""
		},
		{
			label: "标签",
			prop: "labels",
			component: {
				name: "el-select",
				options: dict.get("character")
			},
			col: {
				span: 12
			},
			required: true,
			value: ""
		},
		{
			label: "头像",
			col: {
				span: 12
			},
			prop: "avatar",
			component: { name: "cl-upload" }
		},
		{
			label: "客服码",
			col: {
				span: 12
			},
			prop: "customerCode",
			component: { name: "cl-upload" }
		},
		{
			label: "展示视频",
			col: {
				span: 12
			},
			prop: "videoUrl",
			component: { name: "cl-upload" }
		},
		{
			label: "展示图",
			span: 24,
			prop: "image",
			component: {
				name: "cl-upload",
				props: {
					multiple: true,
					limit: 15
				}
			},
			required: true
		},
		{
			label: "主播来源",
			prop: "source",
			component: {
				name: "el-radio-group",
				props: { clearable: true },
				options: options.sourceList
			},
			col: {
				span: 12
			},
			required: true,
			value: 0
		},
		{
			label: "照片单价",
			prop: "unitPrice",
			hook: "number",
			component: {
				name: "el-input-number",
				props: {
					controlsPosition: "right"
				}
			},
			col: {
				span: 12
			},
			required: true
		},
		{
			label: "是否对聊",
			prop: "isChat",
			component: {
				name: "el-radio-group",
				props: { clearable: true },
				options: options.chatList
			},
			col: {
				span: 12
			},
			required: true,
			value: 0
		},
		{
			label: "预约时间",
			prop: "bookNowTime",
			component: {
				name: "el-select",
				props: { clearable: true, multiple: true },
				options: options.bookNowTimeList
			},
			col: {
				span: 12
			},
			required: true
		},
		{
			label: "对聊价格",
			prop: "chatPrice",
			hook: "number",
			component: {
				name: "el-input-number",
				props: {
					controlsPosition: "right"
				}
			},
			col: {
				span: 12
			},
			required: true
		},
		{
			label: "是否禁用",
			prop: "status",
			component: {
				name: "el-radio-group",
				props: { clearable: true },
				options: options.chatList
			},
			col: {
				span: 12
			},
			required: true,
			value: 1
		},
		{
			label: "介绍",
			prop: "introduction",
			component: { name: "el-input", props: { type: "textarea", rows: 4 } }
		}
	]
});

// cl-table
const Table = useTable({
	columns: [
		{ type: "selection" },
		{ label: "昵称", prop: "nickname", minWidth: 140 },
		{
			label: "头像",
			prop: "avatar",
			minWidth: 100,
			component: { name: "cl-image", props: { size: 60 } }
		},
		{ label: "直播时长", prop: "liveDuration", minWidth: 100 },
		{ label: "音浪", prop: "soundWave", minWidth: 100 },
		{ label: "礼物数", prop: "giftCount", minWidth: 100 },
		{ label: "单量", prop: "orderCount", minWidth: 100 },
		{ label: "单价", prop: "unitPrice", minWidth: 100 },
		{
			label: "创建时间",
			prop: "createTime",
			minWidth: 170,
			sortable: "desc",
			component: { name: "cl-date-text" }
		},
		{ type: "op", width: 600, buttons: ["edit", "delete", "info", "slot-btn"] }
	]
});

// cl-crud
const Crud = useCrud(
	{
		service: service.demo.info
	},
	(app) => {
		app.refresh();
	}
);

// 刷新
function refresh(params?: any) {
	Crud.value?.refresh(params);
}

const refreshFn = async () => {
	service.demo.info.updateAvaterImge();
};

const GetCompanyList = async () => {
	let data = await service.companyList.list.list();
	companyList.value = data.map((o: any) => {
		return {
			value: o.id + "",
			label: o.companyName
		};
	});
};

onMounted(() => {
	GetCompanyList();
});

let visible = ref(false);

let payUrl = ref("");
const ViewPayCode = (row, type) => {
	options.codeType = type;
	if (type == 1) {
		let _url = "/goodsOrder?goodsId=";
		let url = "http://client.dearweb.cn" + _url + row.id;
		payUrl.value = url;
	}
	if (type == 2) {
		let _url = "/anchorViewLogin?anchorId=";
		let url = "http://client.dearweb.cn" + _url + row.uuid;
		payUrl.value = url;
	}
	if (type == 3) {
		let _url = "/#/multiple?channelName=123456";
		let url = "https://video.dearweb.cn" + _url;
		payUrl.value = url;
	}
	if (type == 4) {
		let _url = "/#/multiple?channelName=123456&isHide=true";
		let url = "https://video.dearweb.cn" + _url;
		payUrl.value = url;
	}

	visible.value = true;
};
</script>

<style scoped lang="scss">
.code-box {
	display: flex;
	justify-content: center;
	padding: 40px;
	position: relative;
	img {
		position: absolute;
		top: 50%;
		left: 50%;
		width: 60px;
		margin: -30px 0 0 -30px;
		border-radius: 8px;
	}
}
.code-main {
	display: flex;
	justify-content: center;
}
</style>
